<script setup>
import {
    ref,
    onMounted,
    onUpdated,
    onBeforeMount,
    onBeforeUpdate,
    onBeforeUnmount,
    onErrorCaptured,
    onRenderTracked,
    onRenderTriggered,
    onActivated,
    onDeactivated,
    onServerPrefetch,
    getCurrentInstance
} from 'vue';


import { useLangs } from "@/stores/langs.js";

import { useI18n } from "vue-i18n";

const { t, tm, locale } = useI18n(); //避免使用$t。


let useLangs_state = useLangs();



import locale_zh from 'ant-design-vue/es/date-picker/locale/zh_CN';

import { platform_statistics, platform_error_list, platform_year_info, projectno_getuser } from "@/api/fetch_data.js";
import { get_now ,diff_data} from "@/api/api_util.js";


const { appContext } = getCurrentInstance();
const global = appContext.config.globalProperties;

/*按需引入--*/
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart

import { BarChart, PieChart, PictorialBarChart, LineChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    //   TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    AriaComponent,
    GraphicComponent,
    LegendComponent,
    ToolboxComponent,

} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
    //   TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    AriaComponent,
    BarChart,
    PieChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,

    GraphicComponent,
    LegendComponent,

    PictorialBarChart,
    LineChart,
    ToolboxComponent,

    //   SeriesComponent
]);


let myChartYear = {};

let myCharPar = {};

let total_storage = ref(0); //储能总数
let error_storage = ref(0);
let error_rate = ref("");


let echarts_option = ref({

    color: ["#00CC00", "#0099FF", "#CC66FF"],
    xAxis: {
        type: 'category',
        data: [],
        axisTick: { show: false },
        splitLine: { show: false },

        axisLabel: {
            show: true,
            textStyle: {
                color: '#ffffff',
                fontSize: 15
            }
        }


    },
    legend: {
        top: 0,
        selectedMode: false,
        textStyle: {
            color: '#A7B9D1'
        }
    },
    tooltip: {

    },

    grid: {
        left: 60,
        top: 30,
        bottom: 40,
        right: 10
    },

    yAxis: {
        type: 'value',
        axisLine: {
            show: false,
            color: "#FFF",
            fontSize: 15
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: ["#0E2150"]
            }
        },

        axisLabel: {
            show: true,
            textStyle: {
                color: '#ffffff',
                fontSize: 12
            }
        }
    },

    series: [
        {
            data: [],
            type: 'bar',
            smooth: true,
            name: "SIM异常",
            barGap: 0,
        },
        {
            data: [],
            type: 'bar',
            smooth: true,
            name: "设备异常",
            barGap: 0,
        },
        {
            data: [],
            type: 'bar',
            smooth: true,
            name: "策略偏移",
            barGap: 0,
        }

    ],

});

let echarts_option_pie = ref({
    color: ["red", "orange"],
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '0',
        left: 'center',
        selectedMode: false,
        // data: ["SIM异常", "设备异常"],
        textStyle: {//图例文字的样式
            color: '#fff',
            fontSize: 15
        }
    },
    grid: {
        top: 20,
    },
    series: [
        {
            // name: 'Access From',
            type: 'pie',
            radius: ['35%', '60%'],
            center: ['46%', '55%'],
            // adjust the start angle
            // startAngle: 0,
            labelLine: {
                show: true,
                length2: 6,
                length1: 5,
                color: "#fff"
            },
            label: {
                show: true,
                formatter(param) {
                    // correct the percentage
                    return param.name + ' (' + param.percent + '%)';
                },
                // overflow: 'none',
                color: "#fff"
                // formatter: params => {

                //     console.log("params", params);
                //     return "<span>aa</span>" + params.value + "\n" + params.name

                // },

            },
            data: [
                { value: 1, name: 'SIM异常' },
                { value: 1, name: '设备异常' },
                { value: 1, name: '策略偏移' },


            ]
        }
    ]
});


let errorType_obj = ref({
    0: "SIM异常",
    1: "设备异常",
    2: "策略偏移"
})


let policyStatus_obj = ref({
    0: "正常",
    1: "偏移"
});



let query_date = ref(get_now(1));

let current = ref(1);
let pageSize = ref(10);
let errorType = ref(undefined);
let total_error = ref(0);

let error_list = ref([]);

let bar_list = ref([]);


let right_device_error_num = ref(0);
let right_sim_error_num = ref(0);
let right_stratage_error_num=ref(0);

function change_date(a, b) {
    console.log(a, b);
    query_date.value = b;
}


function formatter_time(str) {
    if (str == undefined || str == '') { return '-' }
    str = str + "";
    var new_str = "";
    new_str =
        str.slice(0, 4) +
        "-" +
        str.slice(4, 6) +
        "-" +
        str.slice(6, 8) +
        " " +
        str.slice(8, 10) +
        ":" +
        str.slice(10, 12) +
        ":" +
        str.slice(12);
    return new_str;
}

function click_error_type(typess) {
    errorType.value = typess;

    current.value = 1;

    page_platform_error_list();
}

function page_platform_error_list() {

    let param = {
        // date: get_now(1),
        date: query_date.value,
        errorType: errorType.value,   //0/sms异常 1/设备异常
        pageNum: current.value,
        pageSize: pageSize.values,
    };

    platform_error_list(param).then(res => {
        if (res.code == 200 || res.success) {
            error_list.value = res.data;
            total_error.value = res.total; //记录总数



        }
    })
}

function page_platform_statistics() {

    let param = {
        data: get_now(1)
    }
    platform_statistics(param).then(res => {
        if (res.success || res.code == 200) {
            console.log('res', res);

            total_storage.value = res.data.storeNum;
            error_storage.value = res.data.errorSoreCount;
            error_rate.value = parseFloat((res.data.errorPercent) * 100).toFixed(2)
        }
    })
}

function openChange(status) {

}

function page_platform_year_info() {

    platform_year_info({}).then(res => {
        if (res.code == 200 || res.success) {
            console.log("res", res);


            let langs = window.sessionStorage.getItem("langs");


            bar_list.value = res.data.monthStatistics;
            right_device_error_num.value = res.data.derrorCount;
            right_sim_error_num.value = res.data.smsErrorCount;
            right_stratage_error_num.value = res.data.strategyErrorCount;


            echarts_option_pie.value.series[0].data[0].value = right_sim_error_num.value;
            echarts_option_pie.value.series[0].data[1].value = right_device_error_num.value;
            echarts_option_pie.value.series[0].data[2].value = right_stratage_error_num.value||0;




            if (langs == "zh") {

                echarts_option_pie.value.series[0].data[0].name = 'SIM异常';
                echarts_option_pie.value.series[0].data[1].name = '设备异常'
                echarts_option_pie.value.series[0].data[2].name = '策略偏移'

            } else {

                echarts_option_pie.value.series[0].data[0].name = 'SIM';
                echarts_option_pie.value.series[0].data[1].name = 'Device'
                echarts_option_pie.value.series[0].data[2].name = 'Stratage'


            }


            myCharPar.setOption(echarts_option_pie.value);


            let bar_x = [];

            let data01 = [];

            let data02 = [];

            let data03=[];


            res.data.monthStatistics.forEach((item, key) => {
                bar_x.push(item.yearMonth.slice(0, 4) + "-" + item.yearMonth.slice(4));
                data01.push(item.smsErrorCount);
                data02.push(item.derrorCount);
                data03.push(item.strategyErrorCount)

            })


            echarts_option.value.xAxis.data = bar_x;
            echarts_option.value.series[0].data = data01;
            echarts_option.value.series[1].data = data02;
            echarts_option.value.series[2].data = data03;



            if (langs == "zh") {
                echarts_option.value.series[0].name = "SIM异常";
                echarts_option.value.series[1].name = "设备异常";
                echarts_option.value.series[2].name = "策略偏移";

            } else {
                echarts_option.value.series[0].name = "SIM";
                echarts_option.value.series[1].name = "Device";
                echarts_option.value.series[2].name = "Stratage";
            }



            //渲染bar图。
            myChartYear.setOption(echarts_option.value);

            // yearMonth: "202312", smsErrorCount: 1, derrorCount: 0

            // monthStatistics
            // smsErrorCount
            // [{ yearMonth: "202312", smsErrorCount: 1, derrorCount: 0 }]
            // derrorPercent
            // smsErrorPercent
        }
    })
}

function go_big_window() {

    global.$router.push({
        path: '/adminbig',
        params: {

        }
    })
}

function get_customer_account(projectNo) {

}


function change_page(page, page_size) {

    current.value = page;
    page_platform_error_list();
}

//有错误可以进入项目
function getin_project(projectNo) {

    projectno_getuser({ "projectNo": projectNo }).then(res => {


        console.log("projectno_getuser", res)
        if (res.success || res.code == 200) {
            window.sessionStorage.setItem("account_costomer", res.data);

            //即将进入项目。
            global.$router.push({
                path: '/index',
                query: {
                    projectno: projectNo
                }
            });
        } else {
            console.log("巡检页面 获取用户信息失败", res)
        }


    })
}

onMounted(() => {

    let langs = window.sessionStorage.getItem('langs');



    if (langs == 'zh') {
        locale.value = "zh";


    } else if (langs == "en") {
        locale.value = "en";

    }

    if (langs == 'zh') {
        errorType_obj.value = {
            0: "SIM异常",
            1: "设备异常",
            2: "策略偏移"
        }

        policyStatus_obj.value = {
            0: "正常",
            1: "偏移"
        }

    } else {
        errorType_obj.value = {
            0: "SIM",
            1: "Device",
            2: "Strategy Shifting"
        }

        policyStatus_obj.value = {
            0: "Normal",
            1: "Shifting"
        }
    }


    myChartYear = echarts.init(document.getElementById('p_echarts'));
    myCharPar = echarts.init(document.getElementById('p_echarts_pie'));

    myChartYear.setOption(echarts_option.value);
    myCharPar.setOption(echarts_option_pie.value);

    window.addEventListener('resize', function () {
        myChartYear && myChartYear.resize();
        myCharPar && myCharPar.resize();
    }, false)

    page_platform_statistics();

    page_platform_error_list();

    page_platform_year_info();

})
</script>

<template>
    <div class="page_wrap">
        <div class="com_wrap cus_header">
            <div style="visibility: hidden;width:75px">tt</div>
            <div class="cus_title">浙江融信达电源科技有限公司</div>
            <div class="header_right">
                <img @click="go_big_window()" src="@/assets/images/inner_header/user_big_window.png" alt="">
                <!-- <img @click="exit()" src="@/assets/images/inner_header/exit.png" alt=""> -->
            </div>
        </div>

        <div class="page_wrap_inner project_error">
            <div class="container" style="height:260px;">
                <div class="sub_wrap" style="flex:0.8;" attr="仅仅容器">
                    <div class="datainfo inner_shadow big">
                        <img class="icon_kuang1" src="@/assets/images/index_com/top_icon.png" alt="">
                        <img class="icon_kuang2" src="@/assets/images/index_com/right_icon.png" alt="">
                        <img class="icon_kuang3" src="@/assets/images/index_com/bottom_icon.png" alt="">
                        <img class="icon_kuang4" src="@/assets/images/index_com/left_icon.png" alt="">


                        <div class="project_info_titile"><img src="@/assets/images/index_com/left_title_icon.png"
                                alt=""><span>{{ tm('platform_checking.异常项目统计') }}</span></div>
                        <div class="data_content"
                            style="display:flex;justify-content: center;color:#fff;align-items: center;padding-top:30px">
                            <div class="error_img_wrap">
                                <img src="@/assets/images/inner_page/checking_error.png" alt="">
                            </div>




                            <div class="other_error" style="margin-left:50px">
                                <div>
                                    <span>{{ tm('platform_checking.总储能数') }}：</span>
                                    <span>{{ total_storage }}</span>
                                </div>
                                <div>
                                    <span>{{ tm('platform_checking.异常储能数') }}：</span>
                                    <span>{{ error_storage }}</span>
                                </div>

                                <div>
                                    <span>{{ tm('platform_checking.异常率') }}：</span>
                                    <span>{{ error_rate }}%</span>
                                </div>

                            </div>
                        </div>
                    </div>


                </div>
                <div class="sub_wrap" style="flex:1.4;margin:0px 20px;">
                    <div class="datainfo inner_shadow big">
                        <img class="icon_kuang1" src="@/assets/images/index_com/top_icon.png" alt="">
                        <img class="icon_kuang2" src="@/assets/images/index_com/right_icon.png" alt="">
                        <img class="icon_kuang3" src="@/assets/images/index_com/bottom_icon.png" alt="">
                        <img class="icon_kuang4" src="@/assets/images/index_com/left_icon.png" alt="">


                        <div class="project_info_titile"><img src="@/assets/images/index_com/left_title_icon.png"
                                alt=""><span>{{ tm('platform_checking.年度异常变化趋势') }}</span></div>
                        <div class="data_content p_echarts" id="p_echarts">
                        </div>
                    </div>
                </div>
                <div class="sub_wrap" style="flex:0.8;">

                    <div class="datainfo inner_shadow big">
                        <img class="icon_kuang1" src="@/assets/images/index_com/top_icon.png" alt="">
                        <img class="icon_kuang2" src="@/assets/images/index_com/right_icon.png" alt="">
                        <img class="icon_kuang3" src="@/assets/images/index_com/bottom_icon.png" alt="">
                        <img class="icon_kuang4" src="@/assets/images/index_com/left_icon.png" alt="">


                        <div class="project_info_titile"><img src="@/assets/images/index_com/left_title_icon.png"
                                alt=""><span>{{ tm('platform_checking.异常构成') }}</span></div>
                        <div class="data_content p_echarts_pie" id="p_echarts_pie">

                        </div>
                    </div>
                </div>
            </div>

            <div class="container" style="height:calc(100% - 260px);padding-top:20px">

                <div class="like_list_wrap inner_shadow big">
                    <img class="icon_kuang1" src="@/assets/images/index_com/top_icon.png" alt="">
                    <img class="icon_kuang2" src="@/assets/images/index_com/right_icon.png" alt="">
                    <img class="icon_kuang3" src="@/assets/images/index_com/bottom_icon.png" alt="">
                    <img class="icon_kuang4" src="@/assets/images/index_com/left_icon.png" alt="">

                    <div class="like_list_query">
                        <div class="query_left">
                            <span :class="{ active: errorType == undefined }" @click="click_error_type(undefined)">{{
                                tm('platform_checking.全部异常') }}</span>
                            <span :class="{ active: errorType == 1 }" @click="click_error_type(1)">{{
                                tm('platform_checking.设备异常') }}</span>
                            <span :class="{ active: errorType == 0 }" @click="click_error_type(0)">{{
                                tm('platform_checking.SIM卡异常') }}</span>
                            <span :class="{ active: errorType == 2 }" @click="click_error_type(2)">{{
                                tm('platform_checking.策略异常') }}</span>
                        </div>
                        <div class="query_right">
                            <a-date-picker :placeholder="query_date" @change="change_date" :locale="locale_zh" />

                            <a-config-provider :theme="{
                                components: {
                                    Button: {
                                        colorPrimary: '#0099FF',
                                    }

                                }
                            }"><a-button type="primary" @click="page_platform_error_list()">{{
    tm('platform_checking.查询') }} </a-button>
                            </a-config-provider>
                            <!-- 0099FF -->
                            <a-config-provider :theme="{
                                components: {
                                    Button: {
                                        colorPrimary: '#00CC66',
                                    }

                                }
                            }">
                                <!-- <a-button type="primary">导出 </a-button> -->
                            </a-config-provider>
                        </div>
                    </div>

                    <div class="like_list">
                        <div class="like_list_title">
                            <span>{{ tm('platform_checking.储能名称') }}</span>
                            <span>{{ tm('platform_checking.异常类型') }}</span>
                            <span>{{ tm('platform_checking.策略偏移') }}</span>
                            <span>{{ tm('platform_checking.SIM卡剩余流量') }}</span>
                            <span>{{ tm('platform_checking.SIM卡到期日期') }}</span>
                            <span>{{ tm('platform_checking.时间') }}</span>
                            <span>{{ tm('platform_checking.操作') }}</span>
                        </div>

                        <div class="like_list_item" v-for="(item, keys) in error_list" :key="item.id0098yusd">
                            <span>{{ item.subProjectName }}</span>
                            <span>{{ errorType_obj[item.errorType] }}</span>
                            <span>{{ policyStatus_obj[item.policyStatus] }}</span>
                            <span>{{ item.simRemainRate }}</span>
                            <!-- <span>{{ formatter_time(item.simEffectDate) }}</span> -->
                            <span>{{ item.simEffectDate }}</span>
                            <span>{{ formatter_time(item.time) }}</span>
                            <span class="op_span" @click="getin_project(item.projectId)">{{ tm('platform_checking.查看')
                            }}</span>
                        </div>


                    </div>

                    <div class="page_change">
                        <a-config-provider :theme="{
                            components: {
                                Pagination: {
                                    colorPrimaryBg: '#fff',
                                    colorPrimaryBorder: '#fff',
                                    colorPrimaryText: '#FFF',
                                    colorText: '#fff',

                                    colorTextSecondary: '#fff'
                                }

                            }
                        }">
                            <a-pagination @change="change_page" class="paginations" v-model:current="current"
                                :show-size-changer="false" :page-size=pageSize :total=total_error
                                :show-total="total => `(${tm('platform_checking.共')} ${total} ${tm('platform_checking.条')})`">
                                <template #itemRender="{ type, originalElement }">
                                    <a v-if="type === 'prev'" class="page_fanye">{{ tm('platform_checking.上一页') }}</a>
                                    <a v-else-if="type === 'next'" class="page_fanye">{{ tm('platform_checking.下一页') }}</a>
                                    <component :is="originalElement" v-else></component>
                                </template>
                            </a-pagination>

                        </a-config-provider>

                    </div>


                </div>

            </div>


        </div>
    </div>
</template>
<style src="@/assets/css/common01.css" scoped></style>

<style scoped>
.op_span {
    cursor: pointer;
}

.page_wrap {
    height: 100%;
    overflow: hidden;
    background: #051D3F;
    position: relative;
}

.admin_header {
    height: 87px;
    margin: 0px 20px;
    background: url("@/assets/images/admin/header.png") no-repeat;
    background-position: center;

    display: flex;
    justify-content: space-between;
}

.admin_header>div:nth-child(1),
.admin_header>div:nth-child(3) {
    flex: 2;
}

.admin_header>div:nth-child(2) {
    flex: 3;
}

.header_middle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header_left {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    color: #fff;
}

.logo {
    width: 120px;
    height: 36px;
    margin: 0px 20px;
}

.header_right {
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;
    box-sizing: border-box;
    color: #fff;
    align-items: center;
}


.page_wrap_inner {
    box-sizing: border-box;
    padding: 20px;
    height: calc(100% - 72px)
}

.container {
    display: flex;
    overflow: hidden;
    width: 100%;
}

.sub_wrap {
    flex: 1;
    height: 100%;
    overflow: hidden;
}

.datainfo {
    height: 100%;
    overflow: hidden;
}

.justify-content {
    display: flex;
    color: #fff;
    justify-content: space-between;
    align-items: center;
    padding: 0px 40px;
    margin-top: 20px;
}


.p_echarts {
    height: calc(100% - 70px)
}

.p_echarts_pie {
    height: calc(100% - 60px)
}

.total_error {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: centers;
}

.total_error>span {
    color: #FFF;
    font-size: 18px;
    margin: 10px 0px;
}

.total_error>p {
    font-size: 18px;
    margin: 10px 0px;
}

.other_error {
    display: flex;
    flex-direction: column;
}

.other_error>div span:first-child {
    color: #FFF;
}

.other_error>div {
    margin: 13px 0px;
}


/*开始表格*/
/*开始表格*/
.like_list {
    margin-top: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 20px;
    max-height: calc(100% - 150px);
    overflow-y: auto;

}

.like_list .like_list_title {
    background: #122864;
    color: #0099FF;
    height: 36px;
    line-height: 36px;
}

.like_list>div {
    color: #fff;
    display: flex;
    background: #091530;
    border-bottom: 1px solid #112661;
    height: 52px;
    line-height: 52px;
    text-align: center;
}

.like_list>div>span {
    flex: 1;
}

/*表格查询区域*/
.like_list_wrap {
    width: 100%;
    height: 100%
}

.like_list_query {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    box-sizing: border-box;
    padding: 0px 20px;
}

.query_left {
    display: flex;
}

.query_right button {
    margin-left: 20px;
}

.query_left span {
    padding: 4px 16px;
    background: #122864;
    border-radius: 4px;
    color: #fff;
    margin-right: 20px;
    cursor: pointer;
}

.query_left span.active {
    background: #0099ff;
}

.com_wrap.cus_header {
    background: #fff;
    /* border: 1px solid #777; */
    display: flex;
    justify-content: space-between;
    height: 70px;
    padding: 0px 0px;
    box-sizing: border-box;
    background: url("@/assets/images/index/cus_header.png") no-repeat;
    background-position: center center;
}

.header_right {
    justify-content: flex-end;

    display: flex;
    justify-content: center;
    align-items: center;
}

.header_right img {
    cursor: pointer;
    margin-right: 30px;
}

.cus_title {
    font-size: 28px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    text-shadow: 0 0 10px #63ACEC, 0 0 20px#63ACEC, 0 0 30px #63ACEC;
    font-weight: 600;
    letter-spacing: 12px
}

.user_header {
    width: 35px;
    height: 35px;
    border-radius: 23px;
    line-height: 20px;
    background: #ddd;
    color: #fff;
    border: 1px solid #fff;
    text-align: center;
    margin-right: 20px;
    padding: 6px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
}

.user_header:hover {
    background-color: #eee;
}

.page_change {
    color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 30px;
    padding-top: 20px;
}

.paginations {
    color: #fff;
}

/* 修改翻页样式 */
.page_fanye[disabled=true] {
    color: #aaa;
}

.page_fanye:hover {
    background: none;
}

.page_fanye {
    color: #fff;
}

:deep(.ant-pagination-item-container .ant-pagination-item-ellipsis) {
    color: #fff !important
}
</style>